<template>
  <div class="home">
    <el-form>
      <el-row>
        <el-col :span="6">
          <el-form-item label="日期">
            <div class="setOffDateBox" v-clickoutside="closeDateBox">
              <div class="selDate-box">
                <el-input v-model="date"
                  placeholder="请选择"
                  readonly="readonly"
                  @focus="isShowCalendarBox=true;"></el-input>
              </div>
              <calendar :showCalendarBox="isShowCalendarBox"
                @close-calendar="closeCalendar"></calendar>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


  </div>
</template>

<script>
// @ is an alias to /src
import calendar from '@/components/calendar.vue';
import Clickoutside from 'element-ui/src/utils/clickoutside';

export default {
  name: 'home',
  directives: { Clickoutside },
  components: {
    calendar,
  },
  data() {
    return {
      // 是否展示日历框
      isShowCalendarBox: false,
      date: '',
    };
  },
  methods: {
    // 点击出日历框的其他位置，隐藏日历框
    closeDateBox() {
      this.isShowCalendarBox = false;
    },
    // 日历框的展示隐藏
    closeCalendar(val) {
      this.date = val;
      this.isShowCalendarBox = !this.isShowCalendarBox;
    },
  },
};
</script>
<style lang="less">
.selDate-box{
  position: relative;
}
</style>
